{% extends 'base/base.html' %}
{% block title %}搜索{% endblock %}
{% load static %}
{% load news_template %}
{% block link %}
    <link rel="stylesheet" href="../../static/css/news/search.css">

{% endblock %}

{% block main_contain %}
    <div class="main-contain ">
        <!-- search-box start -->
        <div class="search-box">
            <form action="" style="display: inline-flex;">

                <input type="search" placeholder="请输入要搜索的内容" name="q" class="search-control">


                <input type="submit" value="搜索" class="search-btn">
            </form>
            <!-- 可以用浮动 垂直对齐 以及 flex  -->
        </div>
        <!-- search-box end -->
        <!-- content start -->
        <div class="content">
            {% if not show %}
                <!-- search-list start -->
                <div class="search-result-list">
                    <h2 class="search-result-title">
                        搜索结果 <span style="font-weight: 700;color: #ff6620;">{{ paginator.num_pages }}</span>页
                    </h2>
                    <ul class="news-list">
                        {# 导入自带高亮功能 #}
                        {% load highlight %}
                        {% for one_news in page.object_list %}
                            <li class="news-item clearfix">
                                <a href="{% url 'news:news_detail' one_news.id %}" class="news-thumbnail"
                                   target="_blank">
                                    <img src="{{ one_news.object.image_url }}">
                                </a>
                                <div class="news-content">
                                    <h4 class="news-title">
                                        <a href="{% url 'news:news_detail' one_news.id %}">
                                            {% highlight one_news.title with query %}
                                        </a>
                                    </h4>
                                    <p class="news-details">{{ one_news.digest }}</p>
                                    <div class="news-other">
                                        <span class="news-type">{{ one_news.object.tag.name }}</span>
                                        <span class="news-time">{{ one_news.object.update_time }}</span>
                                        <span
                                                class="news-author">{% highlight one_news.object.author.username with query %}

                                      </span>
                                    </div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

            {% else %}

                <div class="news-contain">
                    <div class="hot-recommend-list">
                        <h2 class="hot-recommend-title">热门推荐</h2>
                        <ul class="news-list">

                            {% for one_hotnews in page.object_list %}

                                <li class="news-item clearfix">
                                    <a href="#" class="news-thumbnail">
                                        <img src="{{ one_hotnews.news.image_url }}">
                                    </a>
                                    <div class="news-content">
                                        <h4 class="news-title">
                                            <a href="{% url 'news:news_detail' one_hotnews.news.id %}">{{ one_hotnews.news.title }}</a>
                                        </h4>
                                        <p class="news-details">{{ one_hotnews.news.digest }}</p>
                                        <div class="news-other">
                                            <span class="news-type">{{ one_hotnews.news.tag.name }}</span>
                                            <span class="news-time">{{ one_hotnews.update_time }}</span>
                                            <span class="news-author">{{ one_hotnews.news.author.username }}</span>
                                        </div>
                                    </div>
                                </li>

                            {% endfor %}


                        </ul>
                    </div>
                </div>

            {% endif %}

            <!-- search-list end -->
            <!-- news-contain start -->

            {# 分页导航 #}
            <div class="page-box" id="pages">
                <div class="pagebar" id="pageBar">
                    <a class="a1">{{ page.paginator.count | default:0 }}条</a>
                    {#                          上一页的URL地址#}
                    {% if page.has_previous %}
                        {% if query %}
                            <a href="{% url 'news:search' %}?q={{ query }}&amp;page={{ page.previous_page_number }}&q={{ query }}"
                               class="prev">上一页</a>
                        {% else %}
                            <a href="{% url 'news:search' %}?page={{ page.previous_page_number }}" class="prev">上一页</a>
                        {% endif %}
                    {% endif %}


                    {#                          列出所有的URL地址 页码#}
                    {% if page.has_previous or page.has_next %}

                        {% for n in page|page_bar %}
                            {% if query %}
                                {% if n == '...' %}
                                    <span class="point">{{ n }}</span>
                                {% else %}
                                    {% if n == page.number %}
                                        <span class="sel">{{ n }}</span>
                                    {% else %}
                                        <a href="{% url 'news:search' %}?page={{ n }}&q={{ query }}">{{ n }}</a>
                                    {% endif %}
                                {% endif %}
                            {% else %}
                                {% if n == '...' %}
                                    <span class="point">{{ n }}</span>
                                {% else %}
                                    {% if n == page.number %}
                                        <span class="sel">{{ n }}</span>
                                    {% else %}
                                        <a href="{% url 'news:search' %}?page={{ n }}">{{ n }}</a>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    {#                       next_page 下一页的URL地址#}
                    {% if page.has_next %}
                        {% if query %}
                            <a href="{% url 'news:search' %}?q={{ query }}&amp;page={{ page.next_page_number }}&q={{ query }}"
                               class="next">下一页</a>
                        {% else %}
                            <a href="{% url 'news:search' %}?page={{ page.next_page_number }}" class="next">下一页</a>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            <!-- news-contain end -->
        </div>
        <!-- content end -->
    </div>

{% endblock %}


